const refundInfoTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>退款信息</span>
    </div>
    <div>
    <el-form ref="form" label-suffix=":" :model="formData" :rules="rules" label-width="117px" size="small">
      <el-row>
      <el-col :span="6">
        <el-form-item label="应退费用" prop="refundableFee">
          <el-input disabled type="number" v-model="formData.refundableFee" placeholder="请输入应退费用"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="应扣费用" prop="deductFee">
          <el-input :disabled="isDisable" type="number" v-model="formData.deductFee" @input="handleCalcFee" placeholder="请输入应扣费用"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="实退费用" prop="realRefundFee">
          <el-input :disabled="isDisable" type="number" v-model="formData.realRefundFee" placeholder="请输入实退费用"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="业绩扣除规则" prop="performanceFlag">
          <el-select :disabled="isDisable" v-model="formData.performanceFlag" placeholder="请选择">
            <el-option
              key="a1"
              label="应扣算业绩"
              :value="1">
            </el-option>
            <el-option
              key="a2"
              label="应扣不算业绩"
              :value="2">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="退款原因" prop="refundInfo">
          <el-input :disabled="isDisable" v-model="formData.refundInfo" placeholder="请输入退款原因"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="退款信息" prop="payee">
          <el-input :disabled="isDisable" v-model="formData.payee" placeholder="请输入退款信息"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component('app-refund-info', {
  name: 'app-refund-info',
  template: refundInfoTemplate,
  props: ['type'],
  data() {
    return {
      limitCount: 1,
      fileDic: new Map(),
      formData: {
        refundableFee: '',
        deductFee: '',
        realRefundFee: '',
        performanceFlag: '',
        refundInfo: '',
        payee: '',
      },
      rules: {
        refundableFee: [
          {
            required: true,
            message: '请输入应退费用',
          }
        ],
        deductFee: [
          {
            required: true,
            message: '请输入扣除费用'
          }
        ],
        realRefundFee: [
          {
            required: true,
            message: '请输入实退费用'
          }
        ],
        performanceFlag: [
          {
            required: true,
            message: '请选择业绩扣除规则'
          }
        ],
        refundInfo: [
          {
            required: true,
            message: '请输入退款原因'
          }
        ],
        payee: [
          {
            required: true,
            message: '请输入退款信息'
          }
        ],
      },
    }
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
  },
  methods: {
    handleCalcFee() {
      const { refundableFee, deductFee } = this.formData;
      this.formData.realRefundFee = refundableFee - deductFee;
    },
  }
});